<template>
	<gui-page ref="guiPage" :customHeader="true">
		<!-- 导航 -->
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('fixedAssets.recommendedBarcodes')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="distributed">
				<view class="gui-bg-white  ">
					<view class=" gui-form-item custom-card-itemTwo"
						style="padding: 10rpx 2rpx;margin-top: 20rpx;margin-bottom: 20rpx;">
						<text class="item-info-title" style='margin-left: 10px;width: 180rpx;'>{{
							$t('distributedEnter.materialCode')
						}}：</text>
						<comboGrid requestUrl="/api1/wms/commonUtil/QueryMaterial" v-model="data.materialCode"
							style="width: 70%;" :requestParam="data.materialParam" inputKey="materialType"
							:calculate="false" :placeholder="$t('distributedEnter.placeholderTextChoose')"
							:gridPlaceholder="$t('Common.enterCodeOrName')" :column="data.columnName.column"
							bindValue="materialCode" @setClick="getMaterialClick">
						</comboGrid>
						<uni-icons class="iconDelete" style="margin-right: 10rpx;" type="close" v-if="data.materialCode"
							size="18" color="#999" @click="handelMaterialClear"></uni-icons>
					</view>

					<view class="custom-card-itemTwo" style="padding: 20rpx;">
						<text class="item-info-title" style="padding-right: 40rpx;"><text
								class="required-color"></text>{{ $t('distributedEnter.barcodeScan') }}：</text>
						<uni-easyinput class="uni-mt-5" suffixIcon="scan" v-model="data.barcode" type="search"
							@confirm="confirm" @iconClick="iconClick" @focus="data.focus = false" :focus="!data.focus"
							:placeholder="$t('translationImage.pleaseScanTray')">
						</uni-easyinput>
					</view>


					<view class="custom-card-itemTwo" style="padding: 20rpx;">
						<text class="item-info-title">{{ $t('fixedAssets.TransferStatus') }}：</text>
						<superweiCombox style="text-align:right;" :candidates="data.materialTransferStatus"
							:placeholder="$t('distributedOut.placeholder')" :isJSON="true" keyName="name"
							v-model="data.transferStatus" @select="materialTransferSelect"
							:defaultValue="$t('smashRemoval.all')"></superweiCombox>
					</view>
					<view class="gui-form-item gui-border-b gui-flex gui-justify-content-center">
						<view class="gui-flex gui-space-between gui-align-items-center"
							style="width: 70%;height: 100rpx;">
							<button type="default" class="gui-button gui-button-mini gui-bg-black4 gui-noborder"
								style="width:200rpx;" @click="reset">
								<text class="gui-block gui-color-black gui-button-text-mini gui-icons">{{
									$t('distributedEnter.reset') }}</text>
							</button>
							<button type="default" class="gui-button gui-button-mini gui-bg-blue gui-noborder"
								style="width:200rpx;" @click="search">
								<text class="gui-block gui-color-white gui-button-text-mini gui-icons">{{
									$t('distributedEnter.search') }}</text>
							</button>
						</view>
					</view>
				</view>
				<scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll" @scrolltolower="scrolltolowerFn">
					<view class="record-card" v-for="(item, index) in data.barcodeList"
						:key="`${item.barcode}` + `${index}`">
						<view class="card-mini-head">
							<view class="title-line"></view>
							<text v-if="item?.issuedQty > 0" style="color: red;">{{ $t('translationImage.serialNumber')
							}}：{{ index + 1 }}</text>
							<text v-else>{{ $t('translationImage.serialNumber') }}：{{ index + 1 }}</text>
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('distributedEnter.barcode') }}：</text>{{
								item.barcode
							}}
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('distributedEnter.materialCode') }}：</text>{{item.material_code}}
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('distributedEnter.materialName') }}：</text>{{item.material_name}}
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('distributedEnter.materialSpec') }}：</text>{{item.specification || ''}}
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('distributedEnter.uom') }}：</text>{{ item.unit }}
						</view>
						<!-- <view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('translationImage.process')}}：</text>{{ item.processCode }}
						</view> -->
						<view class="custom-card-itemOne ">
							<text class="item-info-title ">{{ $t('distributedOut.location') }}：</text>{{ item.location_code }}
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('translationImage.numberOfBarcodes')}}：</text>{{ item.barcode_qty}}
						</view>

						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('fixedAssets.shipQty')}}：</text>{{ item.shouldsend_qty }}
						</view>

						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('fixedAssets.issuedQty')}}：</text>{{ item?.realysend_qty ?? 0 }}
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('fixedAssets.stockBatch')}}：</text>{{ item.batch_number }}
						</view>
					</view>
					<view v-if="data.noticeHooks" class="noticeHooks">
						{{ data.barcodeList.length == 0 ? $t('stockManage.notAvailable') : $t('stockManage.without') }}
					</view>
				</scroll-view>
			</view>

		</template>
	</gui-page>
</template>

<script setup>
import { navigate } from '@/utils/routerSkip.js';

import { useStore } from "vuex";
import comboGrid from "@/components/comboGrid";
import superweiCombox from '@/components/superweiCombox';
import { ref, reactive, onMounted, watch, computed, toRaw } from 'vue';
import { basPdaOperationLogFn } from '@/utils/index.js';
import { OPERATION_DEL, OPERATION_LOOK, OPERATION_SCAN } from '@/constant/index.js'
import { getDetailByReqNo, getTranferStatus } from '@/api/api.js'
import { useI18n } from 'vue-i18n';
import pdaScan from '@/hooks/pdaScan.js'
import { onBackPress, onLoad } from '@dcloudio/uni-app';

components: {
	comboGrid,
		superweiCombox
}
const { t } = useI18n();
const { scan } = pdaScan()

let store = useStore();

let calendarCustomRef = ref(null);
let data = reactive({
	transferStatus: '',  //选择调拨条码状态
	transferStatusId: '',  //选择调拨条码状态
	barcodeList: [], //条码
	showPull: true,
	materialCode: '',
	list: [],
	rows: 10,
	page: 1,
	noticeHooks: false,
	barcode: '', //条码
	focus: true,
	reqNo: '', //领料单号
	//物料代码的下拉选择器
	columnName: {
		column: [{
			label: t('distributedEnter.materialCode'),
			name: "materialCode",
		}, {
			label: t('distributedEnter.materialName'),
			name: "materialName",
		}]
	},
	//物料代码的传参
	materialParam: {
		text: '',
		materialCode: "",
		materialName: "", //物料代码,传给接口用的变量
	},

	materialTransferStatus: []

})
onMounted(async () => {
	//PDA扫码
	uni.$on('scancodedate', (data) => {
		console.log('获取到的code：' + data.code)
		data.barcode = data.code
	})
	await getMaterialStatus()
	try {
		let inputParameter = '无'
		let returnParameter = JSON.stringify(data.barcodeList)
		let operationPicture = '推荐调拨条码'
		let callInterface = '无'
		let opertionParmes = {
			inputParameter,
			returnParameter,
			operationPicture,
			callInterface,
			responseCode: '无',//返回状态
			errorMessage: '无',//错误信息
			isPass: 'Y',//是否成功 Y N
			operationType: OPERATION_LOOK,
			module: 'WMS',
			source: "PDA",
		}
		basPdaOperationLogFn(opertionParmes)
	} catch (error) {
	}
	await picking()
})


onLoad((option) => {
	if (option.reqNo) {
		data.reqNo = option.reqNo
	}
})

// 获取调拨类型数据
const getMaterialStatus = () => {
	getTranferStatus({
		current: 1,
		size: 99,
	}).then(res => {
		console.log(res)
		if (res.code == 0) {
			res.data.records.forEach(item => {
				data.materialTransferStatus.push({
					id: item.value,
					name: item.text,
					text: item.text,
					value: item.value
				})
			})
		}
		data.materialTransferStatus.push({
			id: '',
			value: '',
			text: t('smashRemoval.all'),
			name: t('smashRemoval.all')
		})
	})
}

//清除选择的物料
const handelMaterialClear = () => {
	data.materialCode = ''
}

// 物料代码的选择
const getMaterialClick = (x) => {
	data.materialCode = x.materialCode;
}

// 用户点击扫码图标
const iconClick = async (type) => {
	if (type === 'suffix') {
		let code = await scan()
		data.barcode = code
		data.page = 1
		data.barcodeList = []
		picking()
	}
}
// 用户点击搜索
const confirm = () => {
	data.page = 1
	data.barcodeList = []
	picking()
}

//选择调拨状态
const materialTransferSelect = (e) => {
	data.transferStatus = e.name
	data.transferStatusId = e.id
}

const picking = async () => {
	let parmes = {
		current: data.page,
		size: data.rows,
		materialCode: data.materialCode,
		applyCode: data.reqNo,//领料单号
		barcode: data.barcode,
		status: data.transferStatusId
	}
	await getDetailByReqNo(parmes).then(res => {
		if (data.page === 1) {
			if (res.data?.records.length == 0) {
				data.noticeHooks = true
			}
			data.barcodeList = res.data.records
			data.barcodeList.forEach(element => {
				element.openBool = false
			});
		} else {
			let arr = res.data.records
			arr.forEach(element => {
				element.openBool = false
			});
			data.barcodeList = [...data.barcodeList, ...arr]
		}
		data.noticeHooks = data.barcodeList.length >= res.data.total

	})
}

// 下拉加载
const scrolltolowerFn = () => {
	console.log(data.noticeHooks)
	if (!data.noticeHooks) {
		data.page++
		data.isLoading = true;
		picking()
	}
}

const search = async () => {
	data.page = 1
	data.barcodeList = []
	let parmes = {
		current: data.page,
		size: data.rows,
		materialCode: data.materialCode,
		applyCode: data.reqNo,//领料单号
		barcode: data.barcode,
		status: data.transferStatusId
	}
	await getDetailByReqNo(parmes).then(res => {
		data.noticeHooks = false

		if (data.page === 1) {
			if (res.data?.records.length == 0) {
				data.noticeHooks = true
			}
			data.barcodeList = res.data.records
			data.barcodeList.forEach(element => {
				element.openBool = false
			});
		} else {
			let arr = res.data.records
			arr.forEach(element => {
				element.openBool = false
			});
			data.barcodeList = [...data.barcodeList, ...arr]
		}
		data.noticeHooks = data.barcodeList.length >= res.data.total


	})
}

const reset = () => {
	data.materialCode = ""
	data.barcode = ''
	search()
}
</script>

<style lang="scss" scoped>
.scroll {
	flex: 1;
	height: 2rpx;
}

.distributed {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 88rpx);
	// height: 100vh;
}


.distributed-head {
	border-bottom-left-radius: 16rpx;
	border-bottom-right-radius: 16rpx;
}

.navigation_card {
	height: 80rpx;
	padding-top: 20prx;
	width: 50%;
	background-color: #fff;
	padding-right: 10rpx;
	box-sizing: border-box;

}

.scroll {
	flex: 1;
	height: 2rpx;
}

.noticeHooks {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	font-size: 32rpx;
	color: #999;
}

.group {
	display: flex;
	flex-direction: row;

	.group-label {
		width: 230rpx;
		display: flex;
		flex-direction: row;
	}

	.lable-view {
		width: 70rpx;
		height: 100%;
	}
}
</style>s